<template>
  <dl>
    <dt class="fs40 pb20 fw-b">消息</dt>
    <dd class="pb20 d-f gap20">
      <t-button type="success" @click="handleClick1">成功</t-button>
      <t-button type="danger" @click="handleClick2">失败</t-button>
      <t-button type="warning" @click="handleClick3">警告</t-button>
      <t-button type="primary" @click="handleClick4">普通</t-button>
      <t-button type="default" @click="handleClick5">通用</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="message1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">不会自动消失</dt>
    <dd class="pb20 d-f gap20">
      <t-button type="success" @click="handleClick6">点击</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="message2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">消息弹窗</dt>
    <dd class="pb20 d-f gap20">
      <t-button type="success" @click="handleClick7">点击</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="message3"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { TMessage } from '@/base/directive/TMessage/globalMessage'
import { TConfirm } from '@/base/directive/TConfirm/TGlobalConfirm'

const handleClick1 = () => {
  TMessage.success('成功消息')
}
const handleClick2 = () => {
  TMessage.error('失败消息')
}
const handleClick3 = () => {
  TMessage.warning('警告消息')
}
const handleClick4 = () => {
  TMessage.primary('普通消息')
}
const handleClick5 = () => {
  TMessage.default('通用消息')
}
const handleClick6 = () => {
  TMessage({
    duration: 0,
    message: '点击消息将消失'
  })
}
const handleClick7 = () => {
  TConfirm({
    title: '弹窗提示',
    content: '提示内容提示内容提示内容提示内容',
    roundButton: true
  }).then(() => {
    TMessage.success('点击确定')
  }).catch(() => {
    TMessage.error('点击取消')
  })
}

const message1 = `<t-button type="success" @click="handleClick1">成功</t-button>
<t-button type="danger" @click="handleClick2">失败</t-button>
<t-button type="warning" @click="handleClick3">警告</t-button>
<t-button type="primary" @click="handleClick4">普通</t-button>
<t-button type="default" @click="handleClick5">通用</t-button>
const handleClick1 = () => {
  TMessage.success('成功消息')
}
const handleClick2 = () => {
  TMessage.error('失败消息')
}
const handleClick3 = () => {
  TMessage.warning('警告消息')
}
const handleClick4 = () => {
  TMessage.primary('普通消息')
}
const handleClick5 = () => {
  TMessage.default('通用消息')
}`

const message2 = `<t-button type="success" @click="handleClick6">点击</t-button>0
const handleClick6 = () => {
  TMessage({
    duration: 0,
    message: '点击消息将消失'
  })
}`

const message3 = `<t-button type="success" @click="handleClick7">点击</t-button>
const handleClick7 = () => {
  TConfirm({
    title: '弹窗提示',
    content: '提示内容提示内容提示内容提示内容',
    roundButton: true
  }).then(() => {
    TMessage.success('点击确定')
  }).catch(() => {
    TMessage.error('点击取消')
  })
}`
</script>

<style scoped lang="scss">

</style>
